<script setup lang="ts">
import { StartPostion } from "../dragline/drag-element";
import { Dragline } from "../dragline/dragline";

const dragElRef = ref<HTMLDivElement | null>(null);
const dragHandlerRef = ref<HTMLDivElement | null>(null);
let destroy: (() => void) | null = null;

const props = defineProps({
  content: String,
  handler: Boolean,
  dragline: Dragline,
});

onMounted(() => {
  if (
    props.dragline &&
    dragElRef.value &&
    dragHandlerRef.value &&
    props.handler
  ) {
    destroy = props.dragline.registerDragElement({
      container: dragElRef.value,
      dragHandeler: dragHandlerRef.value,
      onDragStart(ev: MouseEvent, startPos: StartPostion) {
        console.log("onDragStart");
      },
      onDrag(ev: MouseEvent, startPos: StartPostion) {
        console.log("onDrag", startPos);
        // 拖动过程中做些什么，比如判断边界
      },
      onDragEnd(ev: MouseEvent) {
        console.log("onDragEnd");
      },
    });
  } else if (props.dragline && dragElRef.value) {
    destroy = props.dragline.registerDragElement({
      container: dragElRef.value,
      onDragStart(ev: MouseEvent, startPos: StartPostion) {
        console.log("onDragStart");
      },
      onDrag(ev: MouseEvent, startPos: StartPostion) {
        console.log("onDrag", startPos);

        const { startX, startY, startLeft, startTop } = startPos;
        // 拖动过程中做些什么，比如判断边界
        const { clientX: x, clientY: y } = ev;
        const deltaX = x - startX;
        const deltaY = y - startY;

        let xx = startLeft + deltaX;
        let yy = startTop + deltaY;
        // 边界判断
        if (xx < 0) {
          xx = 0;
        }
        if (
          xx >
          props.dragline!.dragContainer!.clientWidth -
            dragElRef.value!.offsetWidth
        ) {
          xx =
            props.dragline!.dragContainer!.clientWidth -
            dragElRef.value!.offsetWidth;
        }

        if (yy < 0) {
          yy = 0;
        }

        if (
          yy >
          props.dragline!.dragContainer!.clientHeight -
            dragElRef.value!.offsetHeight
        ) {
          yy =
            props.dragline!.dragContainer!.clientHeight -
            dragElRef.value!.offsetHeight;
        }

        dragElRef.value!.style.left = `${xx}px`;
        dragElRef.value!.style.top = `${yy}px`;
      },
      onDragEnd(ev: MouseEvent) {
        console.log("onDragEnd");
      },
    });
  }
});

onUnmounted(() => {
  destroy?.();
});
</script>

<template>
  <div :class="['box', { cursor: !handler }]" ref="dragElRef">
    <div
      v-if="handler"
      :class="['move-handler', { cursor: handler }]"
      ref="dragHandlerRef"
    >
      +
    </div>
    <div>{{ content }}</div>
  </div>
</template>

<style scoped>
.box {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background-color: #ffbcad;
  user-select: none;
  text-align: center;
}
.cursor {
  cursor: pointer;
}

.move-handler {
  height: 32px;
  line-height: 32px;
  text-align: center;
  background-color: antiquewhite;
}

.active-item {
  background-color: blue;
}
.active {
  background-color: red;
}

.other-aligned {
  background-color: yellow;
}
</style>
